<template>
  <div class="cateList">
    <div class="title" v-if="cateItem.cat_name">
      <span class="n">{{cateItem.cat_name}}</span>
    </div>
    <div class="list">
      <template v-for="(item,index) in cateItem.children">
        <div class="rows" @click="changeRows(item)" :key="index">
          <div class="r-wp">
            <div class="row-img">
              <van-image :width="$tools.toPX(155)" :height="$tools.toPX(155)" lazy-load :src="item.cat_img">
                <template v-slot:loading>
                  <van-loading type="spinner" size="24" />
                </template>
              </van-image>
            </div>
            <div class="name van-ellipsis">{{item.cat_name}}</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CateList',
  data () {
    return {

    };
  },
  props: {
    cateItem: {
      type: [Array, Object]
    }
  },
  methods: {
    changeRows (item) {
      this.$emit('change', item);
    }
  }
};
</script>
<style scoped lang="less">
.cateList {
  .title {
    height: 24px;
    width: 187px;
    margin: 15px auto 60px;
    font-size: 28px;
    text-align: center;
    border-bottom: 2px solid #000;
    .n {
      display: inline-block;
      background-color: #fff;
      padding: 0 10px;
    }
  }
  .list {
    overflow: hidden;
    padding-bottom: 30px;
    .name {
      overflow: hidden;
      height: 60px;
    }
  }
}
</style>
